<template>
    <div>
        <a-control-group>
            <a-label
                :color="color"
                :disabled="disabled"
                :size="size"
                :sharp="sharp"
            >
                每页显示
            </a-label>
            <a-input-select
                :color="color"
                :disabled="disabled"
                :size="size"
                :sharp="sharp"
                :items="myPageSizeItems"
                :value="pageSize"
                @update:value="setPageSize($event)"
                :clearable="false"
            ></a-input-select>
            <a-label
                :color="color"
                :disabled="disabled"
                :size="size"
                :sharp="sharp"
            >
                第
            </a-label>
            <a-input-number
                :color="color"
                :disabled="disabled"
                :size="size"
                :sharp="sharp"
                :value="pageIndex"
                @update:value="setPageIndex($event)"
                :clearable="false"
            ></a-input-number>
            <a-label
                :color="color"
                :disabled="disabled"
                :size="size"
                :sharp="sharp"
            >
                /{{ totalPageCount }}页, 共{{ totalCount }}条记录</a-label
            >
            <a-button
                :color="color"
                :disabled="disabled"
                :size="size"
                :sharp="sharp"
                :square="true"
                @click="setPageIndex(1)"
            >
                <span class="fa fa-angle-double-left"></span>
            </a-button>
            <a-button
                :color="color"
                :disabled="disabled"
                :size="size"
                :sharp="sharp"
                :square="true"
                @click="prevPage"
            >
                <span class="fa fa-angle-left"></span>
            </a-button>
            <a-button
                :color="color"
                :disabled="disabled"
                :size="size"
                :sharp="sharp"
                :square="true"
                @click="nextPage"
            >
                <span class="fa fa-angle-right"></span>
            </a-button>
            <a-button
                :color="color"
                :disabled="disabled"
                :size="size"
                :sharp="sharp"
                :square="true"
                @click="setPageIndex(totalPageCount)"
            >
                <span class="fa fa-angle-double-right"></span>
            </a-button>
        </a-control-group>
    </div>
</template>

<script>
export default {
    emits: ['update:pageSize', 'update:pageIndex'],
    props: {
        color: {
            type: String,
            default: 'default',
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        size: {
            type: String,
            default: 'm',
        },
        sharp: {
            type: Boolean,
            default: false,
        },
        pageSize: {
            type: Number,
            default: 10
        },
        pageIndex: {
            type: Number,
            default: 1
        },
        totalCount: {
            type: Number,
            default: 0
        },
        pageSizeItems: {
            type: Array,
            default: [10, 20, 50, 100]
        },
    },
    computed: {
        totalPageCount() {
            return Math.ceil(this.totalCount / this.pageSize)
        },
        myPageSizeItems() {
            let arr = [...this.pageSizeItems]
            arr.push(this.pageSize)
            arr = Array.from(new Set(arr))
            arr.sort((a, b) => a - b)
            return arr.map(a => {
                return {
                    text: `${a}`,
                    value: a
                }
            })
        }
    },
    methods: {
        setPageSize(pageSize) {
            this.$emit('update:pageSize', pageSize)
        },
        setPageIndex(pageIndex) {
            this.$emit('update:pageIndex', pageIndex)
        },
        prevPage() {
            let pageIndex = Math.max(1, this.pageIndex - 1)
            this.setPageIndex(pageIndex)
        },
        nextPage() {
            let pageIndex = Math.min(this.totalPageCount, this.pageIndex + 1)
            this.setPageIndex(pageIndex)
        },
    },
}
</script>